<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto section_3">
			<text class="self-start text_2">充值金额</text>
			<view class="flex-row items-baseline group space-x-14">
				<text class="text_3">￥</text>
				<input type="text" class="text_4" v-model="data.pay_amounts">
			</view>
			<view class="flex-col group_2">
				<view class="divider"></view>
				<text class="self-start font_1 text_5">支付方式</text>
				<view class="flex-row justify-between items-center group_3">
					<view class="flex-row items-center space-x-15">
						<image class="shrink-0 image_7" src="/static/weixin.png" />
						<text class="text_6">微信支付</text>
					</view>
					<image class="image_8" src="/static/click_ac.png" />
				</view>
				<view class="flex-col justify-start items-center button text-wrapper" @click="getDate1">
					<text class="font_1 text_7">立即充值</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		onBeforeUnmount
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let interval
	let clearTime1
	let data = ref({
		order_id: '',
		order_sn: '',
		pay_amounts: '',
		member_id: '',
		time: '',
		mode: 0,
		balance:''
	})
	onLoad(() => {
		
	})
	onBeforeUnmount(()=>{
		clearInterval(clearTime1)
		clearInterval(interval)
	})
	const getDate1 = () => {
		proxy.$req.requestPOST(proxy.$api.FlowInfo.rechargeOrder,{
			member_id:uni.getStorageSync('member_id'),
			amounts:data.value.pay_amounts
		}).then(res => {
			if (res.flag == "success") {
				data.value.order_sn = res.data.order_sn
				data.value.order_id = res.data.order_id
				pay()
			}else{
				uni.showToast({
					title: res.message,
					icon: "none"
				})
			}
		})
	}
	const pay = () => {
		proxy.$req.requestPOST(proxy.$api.FlowInfo.doPay, {
				order_sn: data.value.order_sn,
				member_id: uni.getStorageSync('member_id'),
				payment: data.value.mode==0?2:3,
			}).then(res1 => {
			console.log(res1, "res11111", res1.data);
			if (res1.flag == "success") {
				if(data.value.mode==0){
					WeixinJSBridge.invoke(
						"getBrandWCPayRequest", {
							appId: res1.data.appid, // 微信的appid
							nonceStr: res1.data.noncestr,
							paySign: res1.data.sign,
							signType: res1.data.signType,
							timeStamp: res1.data.timestamp,
							package: res1.data.package,
						},
						(res2) => {
							console.log(res2,'WeixinJSBridge');
							if (res2.err_msg == "get_brand_wcpay_request:ok") {
								uni.showToast({
									title: '支付成功',
									icon: "none"
								})
								data.value.pay_amounts=''
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							} else {
								uni.showToast({
									title: '支付失败，请重新支付',
									icon: "none"
								})
							}
							// interval = setInterval(() => {
							// 	proxy.$req.requestGET(proxy.$api.FlowInfo.appCallback, {
							// 			order_sn: data.value.order_sn,
							// 			member_id: uni.getStorageSync('member_id')
							// 		}).then(res => {
							// 		console.log(res);
							// 		if (res.flag == "success") {
							// 			uni.showToast({
							// 				title: '支付成功',
							// 				icon: "none"
							// 			})
							// 			clearInterval(interval);
							// 			setTimeout(() => {
							// 				uni.navigateTo({
							// 					url: '/pages/myOrder/myOrder?type=-1'
							// 				})
							// 			}, 1000)
							// 		}
							// 	}).catch(err => {
							// 		uni.showToast({
							// 			title: '支付失败，请重新支付',
							// 			icon: "none"
							// 		})
							// 	})
							// }, 1000);
						}
					)
				}else{
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/myOrder/myOrder'
						})
					}, 1000)
				}
			} else {
				uni.showToast({
					title: res1.message,
					icon: 'none'
				})
			}
		})
	}
	const timetopay = () => {
		let time1 = 1200
		// console.log(time1);
		if (time1 > 1) {
			clearTime1 = setInterval(() => {
				time1--
				if (time1 < 1) {
					clearInterval(clearTime1)
					uni.showToast({
						title: '订单支付超时',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
				data.value.time = getTime(time1)
				// console.log(this.time);
			}, 1000)
		} else {
			clearInterval(clearTime1)
			uni.navigateBack()
		}
	}
	const getTime = (time) => {
		// 转换为式分秒
		let h = parseInt(time / 60 / 60 % 24)
		h = h < 10 ? '0' + h : h
		let m = parseInt(time / 60 % 60)
		m = m < 10 ? '0' + m : m
		let s = parseInt(time % 60)
		s = s < 10 ? '0' + s : s
		// 作为返回值返回
		let ti = h + ':' + m + ':' + s
		return ti
	}

	const tocopy = (text) => {
		console.log('text=', text);
		// #ifdef H5
		let textarea = document.createElement("textarea")
		textarea.value = text
		textarea.readOnly = "readOnly"
		document.body.appendChild(textarea)
		textarea.select() // 选中文本内容
		textarea.setSelectionRange(0, text.length)
		uni.showToast({ //提示
			title: '复制成功',
			icon: 'success'
		})
		document.execCommand("copy")
		textarea.remove()
		// #endif
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.section_3 {
			padding: 53rpx 0 56rpx;
			background-color: #ffffff;
			overflow-y: auto;

			.text_2 {
				margin-left: 32rpx;
				color: #333333;
				font-size: 30rpx;
				font-family: PingFangHeiTC;
				line-height: 29rpx;
			}

			.group {
				margin-top: 47rpx;
				padding: 0 21rpx;

				.text_3 {
					color: #333333;
					font-size: 72rpx;
					font-family: PingFangSC;
					line-height: 55rpx;
				}

				.text_4 {
					color: #333333;
					font-size: 70rpx;
					font-family: PingFangSC;
					line-height: 54rpx;
				}
			}

			.space-x-14 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 14rpx;
				}
			}

			.group_2 {
				margin-top: 24rpx;
				padding: 0 30rpx;

				.divider {
					background-color: #f2f2f2;
					height: 2rpx;
				}

				.font_1 {
					font-size: 32rpx;
					font-family: PingFangSC;
					line-height: 31rpx;
				}

				.text_5 {
					margin-top: 80rpx;
					color: #333333;
				}

				.group_3 {
					margin-top: 47rpx;

					.space-x-15 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 15rpx;
						}

						.image_7 {
							width: 48rpx;
							height: 48rpx;
						}

						.text_6 {
							color: #333333;
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 700;
							line-height: 31rpx;
						}
					}

					.image_8 {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.button {
					// margin: 8rpx 30rpx 0;

					.text_7 {
						color: #ffffff;
					}
				}

				.text-wrapper {
					padding: 34rpx 0;
					background-color: #54bc6e;
					background-image: linear-gradient(0deg, #00a796 0%, #54bc6e 100%);
					border-radius: 24rpx;
					width: 90%;
					position: fixed;
					bottom: 40rpx;
				}
			}
		}
	}
</style>